<!DOCTYPE html>
<html lang="zh-cmn-Hans-CN">

	<head>
		<meta charset="UTF-8">
		<title>贵州绿建云</title>
		<!--网页图标-->
		<link rel="shortcut icon" href="img/favicon.ico" />
		<!--Html5 support for old IE-->
		<script src="js/front/html5shiv.min.js" type="text/javascript"></script>
		<!--css3 support for old IE-->
		<script src="js/front/respond.min.js" type="text/javascript"></script>
		<!--fontAwesome-->
		<link rel="stylesheet" href="css/front/font-awesome.min.css">
		<!--css by CloudHand-->
		<link rel="stylesheet" href="css/front/ch233.css">
		<!--vue-->
		<script type="text/javascript" src="js/plugins/vue/vue.js"></script>
		<link rel="stylesheet" href="css/front/index.css" />
	</head>

	<body>
		<!--vue-->
		<div id="app">
			<!--header-->
			<header>
				<div class="conta">
					<div class="logo">
					<div class="log"><img src="img/css/common/header_logoaa.gif" width="100%" /></div>
					</div>
					<div class="haed">
						<ul>
							<li v-for="haed in haeds">
								<a :href="haed.clik" target="_blank">{{haed.name}}</a>
							</li>
						</ul>
					</div>

				</div>
				<div class="carousel-wrap">
					<!--// 轮播图列表-->
					<transition-group tag="ul" class='slide-ul' name="list">
						<li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" class="list-item">
							<!--<a :href="list.clickUrl" rel="external nofollow" rel="external nofollow" rel="external nofollow">-->
							<img :src="list.image" :alt="list.desc">
							<!--</a>-->
						</li>
					</transition-group>
					<!--// 轮播图位置指示-->
					<div class="carousel-items" @mouseenter="stop" @mouseleave="go">
						<span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @click="change(index)"></span>
					</div>
				</div>
				<div class="header-notice-wrapper">
					<ul class="header-notice">
						<li v-for="text in texts">
							<a href="#"><i class="fa fa-volume-up"></i>{{text.name}}</a>
						</li>
						<li class="last">
							<a href="#"><i class="fa fa-plus"></i>{{mes}}</a>
						</li>
					</ul>
				</div>
			</header>
			<div class="section-tt container1180">
				<h1>{{yiy}}</h1>
				<p>{{yiy1}}</p>
			</div>
			<section class="main-column container1180" v-for="h1 in h2s">
				<div class="main-col-item">
					<img src="img/css/common/mian_col_icon_0.gif">
					<h2>{{h1.name}}</h2>
					<p>{{h1.name1}}</p>
				</div>
				<div class="main-col-item">
					<img src="img/css/common/mian_col_icon_1.gif">
					<h2>{{h1.name2}}</h2>
					<p>{{h1.name3}}</p>
				</div>
				<div class="main-col-item">
					<img src="img/css/common/mian_col_icon_2.gif">
					<h2>{{h1.name4}}</h2>
					<p>{{h1.name5}}</p>
				</div>
				<div class="main-col-item">
					<img src="img/css/common/mian_col_icon_3.gif">
					<h2>{{h1.name6}}</h2>
					<p>{{h1.name7}}</p>
				</div>
				<div class="main-col-item">
					<img src="img/css/common/mian_col_icon_4.gif">
					<h2>{{h1.name8}}</h2>
					<p>{{h1.name9}}</p>
				</div>
			</section>

			<section class="function-wrapper">
				<div class="section-tt section-tt-fn container1180">
					<h1>{{mes1}}</h1>
					<p>{{mes2}}</p>
				</div>
				<div class="function-bar container1180" v-for="function1 in functions1">
					<div class="fn-item">
						<img src="img/css/common/fn_0.jpg">
						<div class="fn-item-it">
							<img class="icon" src="img/css/common/fn_0_icon.png">
							<h3>{{function1.name}}</h3>
							<p></p>
						</div>
					</div>
					<div class="fn-item">
						<img src="img/css/common/fn_1.jpg">
						<div class="fn-item-it">
							<img class="icon" src="img/css/common/fn_1_icon.png">
							<h3>{{function1.name1}}</h3>
							<p></p>
						</div>
					</div>
					<div class="fn-item">
						<img src="img/css/common/fn_2.jpg">
						<div class="fn-item-it">
							<img class="icon" src="img/css/common/fn_2_icon.png">
							<h3>{{function1.name2}}</h3>
							<p></p>
						</div>
					</div>
					<div class="fn-item">
						<img src="img/css/common/fn_3.jpg">
						<div class="fn-item-it">
							<img class="icon" src="img/css/common/fn_3_icon.png">
							<h3>{{function1.name3}}</h3>
							<p></p>
						</div>
					</div>
					<div class="fn-item">
						<img src="img/css/common/fn_4.jpg">
						<div class="fn-item-it">
							<img class="icon" src="img/css/common/fn_4_icon.png">
							<h3>{{function1.name4}}</h3>
							<p></p>
						</div>
					</div>
					<div class="fn-item">
						<img src="img/css/common/fn_5.jpg">
						<div class="fn-item-it">
							<img class="icon" src="img/css/common/fn_5_icon.png">
							<h3>{{function1.name5}}</h3>
							<p></p>
						</div>
					</div>
					<div class="fn-item">
						<img src="img/css/common/fn_6.jpg">
						<div class="fn-item-it">
							<img class="icon" src="img/css/common/fn_6_icon.png">
							<h3>{{function1.name6}}</h3>
							<p></p>
						</div>
					</div>
				</div>
			</section>

			<div class="section-tt container1180">
				<h1>{{mes3}}</h1>
				<p></p>
			</div>
			<section class="products-wrapper container1180">
				<ul class="products-li listTab0 current">
					<li v-for="product in products">
						<a href="#">
							<h4>{{product.name}}</h4>
							<p>{{product.name1}}</p>
						</a>
					</li>
					<li class="last"></li>
				</ul>
				<ul class="products-li listTab1">
					<li v-for="product1 in products1">
						<a href="#">
							<h4>{{product1.name}}</h4>
							<p>{{product1.name1}}</p>
						</a>
					</li>
					<li class="last"></li>
				</ul>
				<ul class="listTabDo">
					<li class="current">1</li>
					<li>2</li>
				</ul>
				<div class="listTabPv"><i class="fa fa-angle-left"></i></div>
				<div class="listTabNt"><i class="fa fa-angle-right"></i></div>
			</section>

			<section class="partner-wrapper">
				<div class="section-tt container1180">
					<h1>{{mes4}}</h1>
					<p>{{mes5}}</p>
				</div>
				<ul class="partner-li container1180">
					<li v-for="img in imgs" :key="img">
						<a href="#"><img :src="img"></a>
					</li>
					<li class="last"></li>
				</ul>
			</section>

			<footer class="foote">
				 <p>版权所有：贵州绿建云&nbsp;&nbsp;&nbsp;&nbsp;Copyright©2017 All rights reserved</p>
			</footer>
		</div>
		<!--vue结束-->
		<!--Elements UED ch233.js-->
		<script type="text/javascript" src="js/plugins/jQuery/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="js/front/ch233.min.js"></script>
		<script>
			var Main = {
				data() {
					return {
						//轮播图图片路径
						slideList: [{
								"clickUrl": "#",
								"desc": "nhwc",
								"image": "img/updata/slide/cover_0.jpg"
							},
							{
								"clickUrl": "#",
								"desc": "hxrj",
								"image": "img/updata/slide/cover_1.jpg"
							},
							{
								"clickUrl": "#",
								"desc": "rsdh",
								"image": "img/updata/slide/cover_2.jpg"
							},
							{
								"clickUrl": "#",
								"desc": "rsdh1",
								"image": "img/updata/slide/cover_3.jpg"
							}
						],
						//头部公告信息
						texts: [{
								name: '[2017-06-30]“保护母亲河，河长大巡河”...'
							},
							{
								name: '[2017-06-20]人民网刊登《中外嘉宾共探特色小城镇之美》'
							},
							{
								name: '[2017-06-12]多彩贵州网刊登《贵州：2017年底省级示范镇...'
							}
						],
						//网页内容
						mes: '更多信息',
						yiy: '易用、安全的绿色建筑大数据服务',
						yiy1: '计算、存储、网络、安全、智能，大数据科技助您一臂之力',
						mes1: '绿建栏目',
						mes2: '建立绿色建筑科技支撑体系，解决制约绿色建筑健康快速发展的难题',
						mes3: '绿色产品',
						mes4: '合作伙伴',
						mes5: '加入绿建云平台合作伙伴计划，开创新业务，获取技术、资源，实现更快速成长',
						show: true,
						currentIndex: 0,
						h2s: [{
							name: '绿建评星 ',
							name1: '国家标准，规范流程，方便快捷',
							name2: 'EPC采购',
							name3: '国内品类最全的建筑和材料数据库',
							name4: '会员服务',
							name5: '绿建联创平台会员定制服务',
							name6: '企业服务',
							name7: '注册企业用户入口',
							name8: '政府服务',
							name9: '政府管理部门入口'
						}],
						//导航
						haeds:[
						{name:'最新活动',clik:'front/active/list.html'},
						{name:'行业应用',clik:'front/profession/list.html'},
						{name:'大数据'},
						{name:'装配式建筑'},
						{name:'项目信息',clik:'front/project/list.html'},
						{name:'绿建会员',clik:'front/member/list.html'},
						{name:'绿建社区',clik:'front/community/index.html'},
						{name:'支持'},
						{name:''},
						{name:'注册'},
						{name:'登录',clik:'#'}
						
						],
	                //绿建项目
						functions1: [{
							name: '行业资讯',
							name1: '装配式建筑',
							name2: '绿建大数据',
							name3: '绿建评星',
							name4: '绿建热点',
							name5: '绿建推荐',
							name6: '项目案例'
						}],
						products: [{
								name: '墙体材料',
								name1: '新型建筑墙体材料'
							},
							{
								name: '保温隔热',
								name1: '新型环保保温隔热材料'
							},
							{
								name: '防水密封',
								name1: '新型防水密封材料'
							},
							{
								name: '陶瓷材料',
								name1: '新型陶瓷材料'
							}
						],
						products1: [{
								name: '结构建材',
								name1: '新型结构建材'
							},
							{
								name: '装饰装修材料',
								name1: '新型装饰装修材料'
							},
							{
								name: '工业废渣利用',
								name1: '工业废渣综合利用/污水源热泵技术'
							},
							{
								name: '再生能源利用',
								name1: '太阳能综合利用'
							}
	
						],
						//尾部商标
						imgs: [
							'img/updata/logo/pa_icon_0.gif',
							'img/updata/logo/pa_icon_1.gif',
							'img/updata/logo/pa_icon_2.gif',
							'img/updata/logo/pa_icon_3.gif',
							'img/updata/logo/pa_icon_4.gif'
						]
					}
				},
				methods: {
					//过渡效果
					randomIndex: function() {
						return Math.floor(Math.random() * this.slideList.length)
					},
					add: function() {
						this.slideList.splice(this.randomIndex(), 0, this.nextNum++)
					},
					remove: function() {
						this.slideList.splice(this.randomIndex(), 1)
					},
					//鼠标离开事件
					go() {
						var _this = this;
						this.timer = setInterval(function(){
							_this.autoPlay()
						}, 4500)
					},
					//鼠标移上
					stop() {
						clearInterval(this.timer)
						this.timer = null
					},
					//点击圆点
					change(index) {
							this.currentIndex = index
						},

					autoPlay() {
						this.currentIndex++
							if(this.currentIndex > this.slideList.length - 1) {
								this.currentIndex = 0
							}
						}
				},//图片轮播
				created() {
					var _this = this;
					this.$nextTick(function(){
						this.timer = setInterval(function(){
							_this.autoPlay()
						}, 4500)
					})
				}
			}
			var Ctor = Vue.extend(Main)
			new Ctor().$mount('#app')
		</script>
	</body>

</html>